<template>
  <div class="order-top-view">
      <div class="order-top-left">
          <div class="roder-number">
              <span style="font-size:40px">63号</span>
          </div>
          <div class="order-number-tip">
              <span>候诊号</span>
          </div>
      </div>
      <div class="order-top-right">
            <CommonItemContent v-for="item in commonItems" :key="item.title"  :commonItem="item"></CommonItemContent>
      </div>
  </div>
</template>

<script>
import CommonItemContent from './OrderCommonItem'
export default {
    name:'OrderTopView',
    components:{
        CommonItemContent
    },
    data(){
        return{
            commonItems:[
                {
                    title:'门诊：',
                    content:'发热门诊'
                },{
                    title:'主治医师：',
                    content:'李广玲'
                },{
                    title:'门诊楼层：',
                    content:'急诊楼2楼'
                },{
                    title:'等待时间：',
                    content:'2小时'
                }
            ]
        }
    }
}
</script>

<style scoped>
.order-top-view{
    height: 130px;
    background: white;
    display: flex;
    margin-left: 5px;
    margin-right: 5px;
    border: solid 1px #1296db;
}
.order-top-left{
    height: 130px;
    width: 130px;
    color: #333333;
    font-weight: 600;
    border-right: solid 1px #f2f2f2;
}
.roder-number{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 60%;
}
.order-number-tip{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #666666;
    /* height: 40px; */
}
.order-top-right{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

</style>